<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div class="iconfont back_iconfot">&#xe624;</div>
      </div>
      <div class="header-input"><span class="iconfont">&#xe632;</span>请输入城市/美食/电影院.....</div>
      <router-link to="/city">
        <div class="header-right">{{this.city}}<span class="iconfont allow_iconfont">&#xe615;</span></div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
   line-height: $headerHeight
   background: $bgColor
   display: flex
   color: #fff
   .header-left
    float: left
    width: .64rem
    .back_iconfot
     font-size .4rem
     text-align center
   .header-input
    flex: 1
    line-height: 0.64rem
    height: .64rem
    margin-left: .2rem
    margin-top: .12rem
    border-radius: .1rem
    background: #fff
    color: #ccc
    padding-left .1rem
   .header-right
    float: right
    min-width: 1.04rem
    padding 0 .1rem
    text-align: center
    color: #fff
    .allow_iconfont
     font-size .24rem
     margin-left .04rem
</style>
